<template>
  <div class="dashboard-container Simulation-addition">
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

    <!-- 选择分类 -->
    <el-row :gutter="20" class="choice-classification">
      <el-col :span="12" :offset="6" class="choice-classification-top">
        <el-form-item label="选择分类：" prop="Primary_classification,Secondary_classification,Three_level_classification" style="width: 100%;">
          <el-col :span="8">
            <el-select v-model="ruleForm.question_parentid" placeholder="一级分类" @change="queryTwoLevel(ruleForm.question_parentid)">
              <el-option v-for="item in oneLevel" :key="item.id" :label="item.cat_name" :value="item.id"></el-option>
            </el-select>
          </el-col>
          <el-col :span="8">
           <el-select v-model="ruleForm.question_secondid" placeholder="二级分类" @change="queryThreeLevel(ruleForm.question_secondid)">
             <el-option v-for="item in twoLevel" :key="item.value" :label="item.cat_name" :value="item.id"></el-option>
           </el-select>
          </el-col>
          <el-col :span="8">
            <el-select v-model="ruleForm.question_catid" placeholder="三级分类">
              <el-option v-for="item in threeLevel" :key="item.value" :label="item.cat_name" :value="item.id"></el-option>
            </el-select>
          </el-col>
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 选择科目，考试时间 -->
    <el-row :gutter="20" class="subject-chapter">
      <el-col :span="12" :offset="6">
        <el-form-item label="选择科目：" prop="Select_subject" style="width: 100%;">
          <el-col :span="12" class="subject" style="width: 100%;">
            <el-select v-model="ruleForm.question_subjectId" placeholder="选择科目" style="width: 100%;">
              <el-option v-for="item in subjectList" :key="item.id" :label="item.subject_name" :value="item.id"></el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="考试时间：" prop="Examination_time"  style="width: 100%;">
          <el-col :span="12" class="chapter"  style="width: 100%;">
            <el-input v-model="ruleForm.question_totalTime" placeholder="请输入考试时间,分钟"></el-input>
          </el-col>
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 标题 -->
    <el-row :gutter="20" style="margin-top: 10px;">
      <el-col :span="12" :offset="6">
       <div class="grid-content bg-purple-dark title">
         <el-form-item label="标题：" prop="title"  style="width: 100%;">
           <el-input v-model="ruleForm.question_title" placeholder="请输入标题"></el-input>
         </el-form-item>
       </div>
      </el-col>
    </el-row>

    <!-- 题型数据 -->
    <el-row :gutter="20" style="margin-top: 10px;">
      <el-col :span="12" :offset="6">
       <div class="grid-content bg-purple-dark title">
         <el-form-item label="题型数据：" prop="Question_type_data" class="option-div"></el-form-item>
         <el-row style="width: 100%;">
          <!-- 渲染问题列表 -->
           <el-row class="Question-type-data" v-for="(item, index) in ruleForm.question_option">
             <el-row class="Question-type-data-top">
               <el-col :span="12">
                  <el-form-item prop="Choose_a_question_type">
                    <el-select v-model="item.detail_optionid" placeholder="请选择题型" style="width: 100%; margin-left: 0px;">
                      <el-option v-for="item in choice" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                  </el-form-item>
               </el-col>
               <el-col :span="12">
                 <el-form-item prop="Total_score"  style="width: 100%;">
                   <el-input v-model="item.detail_scoreTotal" placeholder="请输入总分值" @change="getToles"></el-input>
                 </el-form-item>
               </el-col>
             </el-row>
             <el-row class="Question-type-data-auto">
                <el-col :span="24">
                  <el-form-item prop="Explanation"  style="width: 100%;">
                    <el-input v-model="item.detail_condition" placeholder="请输入题型说明"></el-input>
                  </el-form-item>
                </el-col>
             </el-row>
             <el-row class="Question-type-data-bottom">
               <el-col :span="12">
                 <el-form-item prop="Number_of_topics"  style="width: 100%;">
                   <el-input v-model="item.detail_titleNum" placeholder="请输入题目数量"></el-input>
                 </el-form-item>
               </el-col>
               <el-col :span="12">
                  <el-form-item prop="Single_question_score"  style="width: 100%;">
                    <el-input v-model="ruleForm.detail_scoreOne" placeholder="请输入单题分数"></el-input>
                  </el-form-item>
               </el-col>
             </el-row>
             <el-col :span="2" class="increase">
             	<el-button type="primary" icon="el-icon-plus" plain style="margin-left:10px;" circle @click="getAdd"/>
             </el-col>
             <el-col :span="2" class="increases">
             	<el-button type="danger" icon="el-icon-delete" plain style="margin-left:10px;" circle @click="getdelete(index)"/>
             </el-col>
           </el-row>
           <!-- 添加的子项目 -->
           <!-- <el-row class="Question-type-data">
             <el-row class="Question-type-data-top">
               <el-col :span="12">
                  <el-form-item prop="Choose_a_question_type1">
                    <el-select v-model="ruleForm.Choose_a_question_type1" placeholder="请选择题型" style="width: 100%; margin-left: 0px;">
                      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                  </el-form-item>
               </el-col>
               <el-col :span="12">
                 <el-form-item prop="Total_score1"  style="width: 100%;">
                   <el-input v-model="ruleForm.Total_score1" placeholder="请输入总分值"></el-input>
                 </el-form-item>
               </el-col>
             </el-row>
             <el-row class="Question-type-data-auto">
                <el-col :span="24">
                  <el-form-item prop="Explanation1"  style="width: 100%;">
                    <el-input v-model="ruleForm.Explanation1" placeholder="请输入题型说明"></el-input>
                  </el-form-item>
                </el-col>
             </el-row>
             <el-row class="Question-type-data-bottom">
               <el-col :span="12">
                 <el-form-item prop="Number_of_topics1"  style="width: 100%;">
                   <el-input v-model="ruleForm.Number_of_topics1" placeholder="请输入题目数量"></el-input>
                 </el-form-item>
               </el-col>
               <el-col :span="12">
                  <el-form-item prop="Single_question_score1"  style="width: 100%;">
                    <el-input v-model="ruleForm.Single_question_score1" placeholder="请输入单题分数"></el-input>
                  </el-form-item>
               </el-col>
             </el-row>
             <el-col :span="2" class="increase">
             	<el-button type="danger" icon="el-icon-delete" plain style="margin-left:10px;" circle />
             </el-col>
           </el-row> -->
         </el-row>
       </div>
      </el-col>
    </el-row>

    <!-- 总分值 -->
    <el-row :gutter="20" style="margin-top: 10px;">
      <el-col :span="12" :offset="6">
       <div class="grid-content bg-purple-dark title">
         <span class="title-span">总分值：</span>
         <el-row style="width: 100%; text-align: right;">{{ toles }}分</el-row>
       </div>
      </el-col>
    </el-row>

    <!-- 添加 -->
    <el-row class="add-to" style="margin-top: 10px;">
      <el-row :gutter="20">
        <el-col :span="12" :offset="6">
          <div class="grid-content bg-purple" style="display: flex;">
            <el-button type="primary" style="margin-left: 13%; width: 100%;" @click="submitForm('ruleForm')">添加</el-button>
          </div>
        </el-col>
      </el-row>
    </el-row>
    </el-form>
  </div>
</template>

<script>
    import {cateComList, schooList, adminComList, schoolAjax, schoolDel} from "@/api/menu";
    import {getInfo} from "@/api/user";
    import {examAdd} from "@/api/data_General_question_bank";
    import {subjectList, subjectAdd, subjectInfo, subjectEdit, subjectDel} from "@/api/Subject_management";
  export default {
    data() {
      return {
        oneLevel: [],
        twoLevel: [],
        threeLevel: [],
        subjectList: [],
        ruleForm: {
          question_typeid: '1',
          question_parentid: '',
          question_secondid: '',
          question_catid: '',
          "question_subjectId": '',
          "question_title": '',
          "question_totalTime": '',
          "question_option": [{
               "detail_optionid": "",
               "detail_scoreTotal": "",
               "detail_condition": "",
               "detail_titleNum": "",
               "detail_scoreOne": "",
          }
          ]
        },
        choice: [{
          value: '1',
          label: '单选题'
        }, {
          value: '2',
          label: '多选题'
        }, {
          value: '3',
          label: '问答题'
        }, {
          value: '4',
          label: '填空题'
        }, {
          value: '5',
          label: '判断题'
        }, {
          value: '6',
          label: '不定项题'
        }],
        rules: {
          Choose_a_question_type: [
            { required: true, message: '请选择题型', trigger: 'blur' }
          ],
          Choose_a_question_type1: [
            { required: true, message: '请选择题型', trigger: 'blur' }
          ],
          title: [
            { required: true, message: '请输入标题', trigger: 'blur' }
          ],
          Select_subject: [
            { required: true, message: '请选择科目', trigger: 'blur' }
          ],
          Primary_classification: [
            { required: true, message: '请选择一级分类', trigger: 'blur' }
          ],
          Secondary_classification: [
            { required: true, message: '请选择二级分类', trigger: 'blur' }
          ],
          Three_level_classification: [
            { required: true, message: '请选择三级分类', trigger: 'blur' }
          ],
          Examination_time: [
            { required: true, message: '请输入考试时间', trigger: 'blur' }
          ],
          Total_score: [
            { required: true, message: '请输入总分值', trigger: 'blur' }
          ],
          Explanation: [
            { required: true, message: '请输入题型说明', trigger: 'blur' }
          ],
          Number_of_topics: [
            { required: true, message: '请输入题目数量', trigger: 'blur' }
          ],
          Single_question_score: [
            { required: true, message: '请输入单题分数', trigger: 'blur' }
          ],
          Total_score1: [
            { required: true, message: '请输入总分值', trigger: 'blur' }
          ],
          Explanation1: [
            { required: true, message: '请输入题型说明', trigger: 'blur' }
          ],
          Number_of_topics1: [
            { required: true, message: '请输入题目数量', trigger: 'blur' }
          ],
          Single_question_score1: [
            { required: true, message: '请输入单题分数', trigger: 'blur' }
          ],
          Question_type_data: [
            { required: true, message: '题型数据', trigger: 'blur' }
          ]
        },
        value: '',
        input: '',
        adminId: '',
        toles: 0
      }
    },
    computed: {

    },
    mounted() {
      this.getOneLevel()
      this.getInformation()
    },
    filters: {

    },
    methods: {
      // 计算分数
      getToles () {
        this.toles = 0
        for (let i in this.ruleForm.question_option) {
          this.toles = Number(this.ruleForm.question_option[i].detail_scoreTotal) + this.toles
          console.log(this.toles)
        }
      },
      // 增加
      getAdd () {
        this.ruleForm.question_option.push({
          "detail_optionid": "",
          "detail_scoreTotal": "",
          "detail_condition": "",
          "detail_titleNum": "",
          "detail_scoreOne": "",
        })
      },
      // 减少
      getdelete (val) {
        // console.log(index)
        this.ruleForm.question_option = this.ruleForm.question_option.splice(this.ruleForm.question_option.indexOf(val),1);
      },
      /**
       * 获取用户信息
       */
      getInformation() {
        getInfo().then(response => {
          console.log(response);
          this.adminId = response.data.id
          this.getOrganList(this.adminId)
          console.log(response.data.id);
        })
      },
      submitForm(formName) {
        examAdd({
              "question_adminId": this.adminId,
              "question_typeid": this.ruleForm.question_typeid,
              "question_parentid": this.ruleForm.question_parentid,
              "question_secondid": this.ruleForm.question_secondid,
              "question_catid": this.ruleForm.question_catid,
              "question_subjectId": this.ruleForm.question_subjectId,
              "question_title": this.ruleForm.question_title,
              "question_totalTime": this.ruleForm.question_totalTime,
              "question_option": this.ruleForm.question_option
        }).then(response => {
          console.log(response);
          alert('提交成功')
          // this.total = response.data.total;
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      /**
       * 科目列表
       */
      getOrganList(id) {
        subjectList({
          "subject_adminId": id,
          "subject_name": '',
          "subject_parentid": '',
          "subject_secondid": '',
          "subject_catid": '',
          "chaperNum_start": '',
          "chaperNum_end": '',
          "page": 1,
          "page_size": 10,
        }).then(response => {
          console.log(response);
          this.subjectList = response.data.data_list;
          // this.total = response.data.total;
        })
      },
      /**
       * 查询二级数据
       */
      queryTwoLevel(value) {
        console.log(value);
        cateComList({
          cate_parentid: value,
          cate_secondid: 0
        }).then(response => {
          console.log(response);
          this.twoLevel = response.data
          this.twoLevel.unshift({id: "", cat_name: "请选择"})
          // this.queryThreeLevel()
        })
      },
      /**
       * 查询三级数据
       */
      queryThreeLevel(value) {
        // this.ruleForm.catid = '';
        console.log(value);
        cateComList({
          cate_parentid: value,
          cate_secondid: this.ruleForm.parentid
        }).then(response => {
          console.log(response);
          this.threeLevel = response.data
          this.threeLevel.unshift({id: "", cat_name: "请选择"})
        })
      },
      /**
       * 获取一级数据
       */
      getOneLevel() {
        cateComList({
          cate_parentid: 0,
          cate_secondid: 0
        }).then(response => {
          console.log(response);
          this.oneLevel = response.data
          this.oneLevel.unshift({id: "", cat_name: "请选择"})
          // this.queryTwoLevel()
        })
      },
    }
  }
</script>
<style scoped>
  .Simulation-addition .choice-classification-top /deep/ .el-form-item__content{display: flex;}
  .Simulation-addition .Question-type-data-top /deep/ .el-form-item__content,.Simulation-addition .Question-type-data-auto /deep/ .el-form-item__content,.Simulation-addition .Question-type-data-bottom /deep/ .el-form-item__content{margin-left: 0px !important;}
</style>
<style>
  .Simulation-addition .choice-classification-top{display: flex;}
  .Simulation-addition .choice-classification-top .el-select{width: 100%;}
  .Simulation-addition .choice-classification-top .el-col-8{padding: 0px !important;}
  .Simulation-addition .choice-classification-top .el-col-8:nth-child(2){margin: 0px 10px;}
  .Simulation-addition .choice-classification-top .el-col-8:nth-child(3){margin: 0px !important;}

  .Simulation-addition .Question-type-data-top{margin-top: 20px;}
  .Simulation-addition .Question-type-data-top,.Simulation-addition .Question-type-data-bottom{display: flex;}
  .Simulation-addition .Question-type-data-top .el-col-12:nth-child(1),.Simulation-addition .Question-type-data-bottom .el-col-12:nth-child(1){margin-right: 10px;}
  .Simulation-addition .Question-type-data{width: 100%;margin-bottom: 10px;padding: 10px; background-color: #ececec;position: relative;}
  .Simulation-addition .Question-type-data:nth-last-child(1){margin-bottom: 0px;}
  .Simulation-addition .Question-type-data-auto{margin: 0px !important;}
  .Simulation-addition .Question-type-data .increase{position: absolute; right: -60px; top: 40% !important;}
    .Simulation-addition .Question-type-data .increases{position: absolute; right: -110px; top: 40% !important;}
</style>
